<html style="height: 100%">
<head><#include "/base/head.html">
</head>
<body style="height: 100%">
	<div style="padding: 10px; height: 95%;">
		<div style="height: 25%;">
			<form id="userForm" method="post"
				action="${contextPath}/user/queryUsers">
				<table cellpadding="8">
					<tbody>
						<tr>
							<td>ID:</td>
							<td><input class="easyui-textbox" type="text" name="id" /></td>
							<td>姓名:</td>
							<td><input class="easyui-textbox" type="text"
								name="nickname" /></td>
							<td>住址:</td>
							<td><input class="easyui-textbox" type="text"
								name="location" /></td>
						</tr>
						<tr>
							<td>角色:</td>
							<script type="text/javascript">
								
							</script>
							<td><input class="easyui-combobox" id="userForm_authority" name="authority" data-options='
							 ${lovService.getLovListString("lov_role_name")}'/></td>
						</tr>
					</tbody>
				</table>
			</form>
			<div style="text-align: left; padding: 5px">
				<a id="userSearchSubmit" href="javascript:void(0)"
					class="easyui-linkbutton mediumButton">查询</a>
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				init();

				var deleteUrl = "";

				$("#userSearchSubmit").click(function() {
					refreshGrid();
				});
				//点击编辑用户
				$("#userEdit").click(function() {
					$("#userFormEdit").form('clear');

					var selected = $("#userGrid").datagrid('getSelected');
					if (selected == null) {
						alert("请先选择用户");
						return;
					}

					$("#userFormEdit").attr("action", $(this).attr("postUrl"));
					$('#userFormDlg').dialog({
						"iconCls" : "icon-edit",
						"title" : "用户修改"
					});
					$('#userFormDlg').dialog('open');

					var params = new Object();
					params.id = selected.id;

					BaseJs.setFormByUrl("#userFormEdit", params);
				});
				//初始化页面
				function init() {
					$("#userFormEdit").form('clear');
					$("#userForm").form('clear');

					refreshGrid();
				}

				//根据form里面的信息获取并填充grid
				function refreshGrid() {
					BaseJs.formChangeGrid("#userForm", "#userGrid");
				}

				$("#userAdd").click(function() {
					$("#userFormEdit").form('clear');
					$("#userFormEdit").attr("action", $(this).attr("postUrl"));
					$('#userFormDlg').dialog({
						"iconCls" : "icon-add",
						"title" : "用户新增"
					});
					$('#userFormDlg').dialog('open');
				});

				$("#userDelete").click(function() {
					var selected = $("#userGrid").datagrid('getSelected');
					if (selected == null) {
						alert("请先选择用户");
						return;
					}
					var params = new Object();
					params.id = selected.id;
					BaseJs.ajax($(this).attr('postUrl'), params, function() {
						refreshGrid();
						alert("删除用户成功");
					})

				});
				//修改的弹出框按提交
				$("#userSubmitEdit").click(function() {
					BaseJs.submitForm("#userFormEdit", function(rData) {
						//修改完重新查询
						$("#userSearchSubmit").click();
						$('#userFormDlg').dialog('close');
					});
				});
			});
		</script>
		<div style="height: 75%">
			<div id="userToolbar">
				<a id="userAdd" postUrl="user/addUpdateUser"
					href="javascript:void(0)" class="easyui-linkbutton"
					iconcls="icon-add" plain="true">新增用户</a> <a id="userEdit"
					postUrl="user/addUpdateUser" href="javascript:void(0)"
					class="easyui-linkbutton" iconcls="icon-edit" plain="true">编辑用户</a>
				<a id="userDelete" postUrl="user/deleteUser"
					href="javascript:void(0)" class="easyui-linkbutton"
					iconcls="icon-remove" plain="true">删除用户</a>
			</div>

			<div id="userFormDlg" class="easyui-dialog" title="用户新增"
				data-options="iconCls:'icon-add',closed: true"
				style="width: 400px; height: 400px; padding: 10px; text-align: center;">
				<!-- 弹出框用来增加和编辑-->
				<form id="userFormEdit" method="post" action=""
					loadAction="user/getUser">
					<table align="center" cellpadding="8">
						<tr>
							<td>姓名:</td>
							<td><input class="easyui-textbox" type="text"
								name="nickname" /></td>
						</tr>
						<tr>
							<td>密码:</td>
							<td><div>
									<input class="easyui-textbox" type="text" name="password" />
								</div></td>
						</tr>
						<tr>
							<td>年龄:</td>
							<td><div>
									<input class="easyui-textbox" type="text" name="age" />
								</div></td>
						</tr>
						<tr>
							<td>住址:</td>
							<td><div>
									<input class="easyui-textbox" type="text" name="location" />
								</div></td>
						</tr>
						<tr>
							<td>邮件:</td>
							<td><div>
									<input class="easyui-textbox" type="text" name="email" />
								</div></td>
						</tr>
						<tr>
							<td>状态:</td>
							<td><div>
									<input class="easyui-combobox" type="text" name="status" data-options='
							 ${lovService.getLovListString("lov_user_status")}'/>
								</div></td>
						</tr>
						<tr>
							<td>角色:</td>
							<td><div>
									<input class="easyui-combobox" name="authority"  data-options='
							 ${lovService.getLovListString("lov_role_name")}'/>
								</div></td>
						</tr>
					</table>
					<input type="hidden" name="id">
				</form>

				<div style="text-align: center; margin: 10px">
					<a id="userSubmitEdit" href="javascript:void(0)"
						class="easyui-linkbutton mediumButton">确定</a> &nbsp; <a
						href="javascript:void(0)" class="easyui-linkbutton mediumButton"
						onclick=" $('#userFormDlg').dialog('close');">取消</a>
				</div>
			</div>

			<table id="userGrid" toolbar="#userToolbar" class="easyui-datagrid"
				title="用户显示" style="width: 100%; height: 100%;"
				data-options="singleSelect:true,method:'post',fitColumns : true">
				<thead>
					<tr>
						<th data-options="field:'id',width:50,align:'center'">账号ID</th>
						<th data-options="field:'nickname',width:100,align:'center'">用户名</th>
						<th data-options="field:'password',width:100,align:'center'">密码</th>
						<th data-options="field:'age',width:100,align:'center'">年龄</th>
						<th data-options="field:'email',width:100,align:'center'">邮件</th>
						<th data-options="field:'location',width:100,align:'center'">住址</th>
						<th data-options="field:'authority',width:100,align:'center'"
							formatter='updateRoleInfo'>角色名</th>
						<th data-options="field:'status',width:100,align:'center',formatter:formatUserStatus">状态</th>
					</tr>
					<script>
						var lovRoleNameMapping = new Object();
						var lovUserStatusMapping = new Object();
						
						function updateRoleInfo(data, e) {

							if (data == 3 || data == 4) {
								return "<a class='setRoleInfo' roleId='"+data+"' userId='"+e.id+"' href='##' title='点击设置'>" + lovRoleNameMapping[data] + "</a>";
							} else {
								return lovRoleNameMapping[data];
							}
						}
						function formatUserStatus(data) {
							return lovUserStatusMapping[data];
						}
						

						$(function() {
							
							initSelect();
							
							function initSelect() {
								//初始化lovRoleNameMapping 用来显示select的列
								$("#userForm_authority").combobox();
								var data = $("#userForm_authority").combobox("getData");
								var textField = $("#userForm_authority").combobox("options").textField;
								var valueField = $("#userForm_authority").combobox("options").valueField;
								
								for(var i in data) {
									lovRoleNameMapping[data[i][valueField]] = data[i][textField];
								}
								
								//初始化状态
								var statusLov = '{'+ '${lovService.getLovListString("lov_user_status")}' +'}';
								var statusObj = JSON.parse(statusLov);
								data = statusObj.data;
								textField = statusObj.textField;
								valueField = statusObj.valueField;
								for(var i in data) {
									lovUserStatusMapping[data[i][valueField]] = data[i][textField];
								}
							}
							
							$(document).on('click', ".setRoleInfo", function() {

								var roleId = $(this).attr('roleId');
								var userId = $(this).attr('userId');
								var roleName = "";

								switch (roleId) {
								case '3':
									openUserExtendEdit('member', userId);
									break;
								case '4':
									openUserExtendEdit('doctor', userId);
									break;
								}

							});
							var userExtendEditDlg = new Object();

							function openUserExtendEdit(roleName, userId) {
								console.log(roleName+"  "+userId);
								if (!userExtendEditDlg[roleName]) {
									userExtendEditDlg[roleName] = $('#'+roleName+'EditDlgPanel').panel({
										href : '${contextPath}/user/' + roleName + '_edit.html',
										onLoad : function() {
											
											$("#" + roleName + "Id").val(userId);
											$("#" + roleName + "EditDlg").dialog('open');
										}
									});

								}

								$("#" + roleName + "Id").val(userId);
								$("#" + roleName + "EditDlg").dialog('open');
							}
							
						});
					</script>
				</thead>
			</table>
		</div>
		<div id="setRoleInfoDlg" style="display: none;">
			<div id='memberEditDlgPanel'></div>
			<div id='doctorEditDlgPanel'></div>
		</div>
	</div>
</body>
</html>